<template>
  <div class="hello">
    <h1>   一起学习   axios</h1>

  </div>
</template>

<script>
  import axios from 'axios';
  import queryString from 'queryString'

  var CancelToken = axios.CancelToken;
  var source = CancelToken.source();
  var HTTP = axios.create({
    baseURL:'http://106.12.14.210:7300/mock/5b6eedb05f7323fd536a9ebb/example/',
    timeout:1000,
    headers:{
      'custome-header':'miaov',
      'content-type':'application/x-www-form-urlencoded' //支持字符串拼接的形式 (miaov=ketang&name=dengwubo)
    },
    responseType:'json',
    transformRequest:[function (data) { // 发送之前可以对数据进行处理
      data.age=30
      return queryString.stringify(data);
    }],
    transformResponse:[function (data) { // 改变响应数据
      console.log('transformResponse')
      data.data.abc='miaov'
      return data
    }],
    validateStatus(status){  // 改变响应状态码
      console.log(status)
      return status;
    },
    cancelToken:source.token

  });
  export default {

    created(){
      HTTP.post("test-post",{
        miaov:'ketang',
        name:'dengwubo'
      })
        .then(res=>{
          console.log(res.data)
        }).catch(err=>{
        if(axios.isCancel(err)){
          console.log(err.message)
        }else{
          console.log(err)
        }
      })
      source.cancel('操作被用户取消了!')

    }

  }
</script>






<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
